<!--
 * @Author: C.
 * @Date: 2021-12-23 10:11:52
 * @LastEditTime: 2021-12-27 11:11:02
 * @Description: file content
-->
<template>
  <view class="j-search">
    <view style="width: 92%">
      <u-search
        inputAlign="center"
        height="70"
        disabled
        :showAction="false"
        @click="toSearch"
        @close="searchFormShow = false"
      >
      </u-search>
    </view>
    <u-icon name="list-dot" size="30" @click="searchShowClick"></u-icon>
    <u-popup
      :show="searchFormShow"
      mode="right"
      :safeAreaInsetTop="true"
      @close="searchFormClose"
    >
      <view class="search-form">
        <view class="search-form-title">
          <text>条件搜索</text>
        </view>
        <view class="search-bar">
          <view class="j-btn search-bar-cancel" @click="searchFormClose"
            >取消</view
          >
          <view class="j-btn search-bar-confirm">搜索</view>
        </view>
      </view>
    </u-popup>
  </view>
</template>

<script>
export default {
  props: {
    searchKey: {
      type: String,
      default: ""
    },
    register: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      searchFormShow: false
    };
  },
  methods: {
    toSearch() {
      // console.log(this.searchKey);
      uni.$u.route({
        url: "pages/Common/Search/index",
        params: {
          searchKey: this.register?.key || this.searchKey
        }
      });
    },
    searchShowClick() {
      uni.hideTabBar({
        animation: true
      });
      this.searchFormShow = true;
    },
    searchFormClose() {
      this.searchFormShow = false;
      uni.showTabBar({
        animation: true
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.j-search {
  padding: 10rpx;
  @include flexBox($jc: space-between);
  .search-form {
    position: relative;
    width: 65vw;
    height: 100%;
    padding: 15rpx;
    @include iosBottom;
    &-title {
      width: 65vw;
      font-size: $j_fz;
      color: $j_title;
      padding: 30rpx;
    }
    .search-bar {
      position: absolute;
      bottom: 200rpx;
      // background-color: pink;
      height: 150rpx;
      width: 100%;
      border-top: 1rpx solid $j_grey;
      border-bottom: 1rpx solid transparent;
      @include flexBox($jc: space-evenly);

      &-confirm {
        background-color: #0e6eb8;
        color: #fff;
        padding: 20rpx 110rpx;
      }
      .j-btn {
        border-radius: 20rpx;
        font-size: $j_fz;
      }
      &-cancel {
        border: 1rpx solid #ccc;
        color: $j_title;
        padding: 20rpx 40rpx;
        // margin-right: 30rpx;
      }
    }
  }
}
</style>
